<template>
  <div>
    <el-form :inline="true" :model="queryData" class="demo-form-inline">

      <el-form-item label="运单编号">
        <el-input v-model="queryData.id" placeholder="运单编号" />
      </el-form-item>

      <el-form-item label="收件人姓名">
        <el-input v-model="queryData.receiverName" placeholder="收件人姓名" />
      </el-form-item>
      <el-form-item label="收件人电话">
        <el-input v-model="queryData.receiverPhone" placeholder="收件人电话" />
      </el-form-item>

      <!--<el-form-item label="收件人地址">
        <div>
          <v-distpicker
            :province="receiverProvince"
            :city="receiverCity"
            :area="receiverCounty"
          />
        </div>
      </el-form-item>-->

      <el-form-item label="发件人姓名">
        <el-input v-model="queryData.senderName" placeholder="发件人姓名" />
      </el-form-item>

      <el-form-item label="发件人电话">
        <el-input v-model="queryData.senderPhone" placeholder="发件人电话" />
      </el-form-item>

      <!--<el-form-item label="发件人地址">
        <div>
          <v-distpicker
            :province="senderProvince"
            :city="senderCity"
            :area="senderCounty"
          />
        </div>
      </el-form-item>-->

      <el-form-item label="运单状态">
        <el-select v-model="queryData.status" placeholder="任务状态">
          <el-option label="请选择" value="null">请选择</el-option>
          <el-option label="新建" value="1" />
          <el-option label="已装车" value="2" />
          <el-option label="到达" value="3" />
          <el-option label="到达终端网点" value="4" />
          <el-option label="已签收" value="5" />
          <el-option label="拒收" value="6" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55"
      />

      <el-table-column
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column
        fixed
        prop="id"
        label="运单编号"
        width="150"
      />

      <el-table-column
        prop="status"
        label="运单状态"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.status == '1' ? '新建' : scope.row.status == '2' ? '已装车' :
            scope.row.status == '3' ? '到达' : scope.row.status == '4' ? '到达终端网点' :
              scope.row.status == '5' ? '已签收' : '拒收' }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="调度状态"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.schedulingStatus == '1' ? '待调度' : scope.row.schedulingStatus == '2' ?
            '未匹配线路' : '已调度' }}</span>
        </template>
      </el-table-column>

      <!--<el-table-column
        prop="taskTransport.id"
        label="运输任务编号"
        width="300"
      />-->

      <!--<el-table-column
        prop="order.totalWeight"
        label="货物总重(千克)"
        width="300"
      />-->

      <el-table-column
        prop="order.id"
        label="订单编号"
        width="300"
      />

      <el-table-column
        prop="order.createTime"
        label="下单时间"
        width="120"
      />

      <!--      属性待确认-->
      <el-table-column
        prop="order.receiverName"
        label="收件人姓名"
        width="300"
      />

      <el-table-column
        prop="order.receiverPhone"
        label="收件人电话"
        width="120"
      />
      <el-table-column
        prop="order.receiverAddress"
        label="收件人地址"
        width="120"
      />

      <el-table-column
        prop="order.senderName"
        label="发件人姓名"
        width="300"
      />
      <el-table-column
        prop="order.senderPhone"
        label="发件人电话"
        width="120"
      />
      <el-table-column
        prop="order.senderAddress"
        label="发件人地址"
        width="120"
      />

      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        :current-page="Number(queryData.page)"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="Number(queryData.pageSize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情 -->
    <div class="detail-form">
      <el-dialog title="运单详情" :visible.sync="dialogFormVisible">
        <el-form
          :model="detail"
          label-position="right"
          :disabled="true"
          label-width="100px"
        >

          <el-row>
            <el-col :span="12">
              <el-form-item label="运单编号" prop="id">
                <el-input v-model="detail.id" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderId">
                <el-input v-model="detail.orderId" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="运单状态">
                <el-input v-if="detail.status==1" value="新建" />
                <el-input v-else-if="detail.status==2" value="已装车" />
                <el-input v-else-if="detail.status==3" value="到达" />
                <el-input v-else-if="detail.status==4" value="到达终端网点" />
                <el-input v-else-if="detail.status==5" value="已签收" />
                <el-input v-else value="拒收" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="调度状态">
                <el-input v-if="detail.schedulingStatus==1" value="待调度" />
                <el-input v-else-if="detail.schedulingStatus==2" value="未匹配线路" />
                <el-input v-else value="已调度" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="下单时间" prop="order.createTime">
                <el-input v-model="detail.order.createTime" />
              </el-form-item>
            </el-col>

            <!--<el-col :span="12">
              <el-form-item label="签收状态">
                <el-input v-if="detail.signStatus==1" value="已签收" />
                <el-input v-else value="拒收" />
              </el-form-item>
            </el-col>-->
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="收件人姓名" prop="order.receiverName">
                <el-input v-model="detail.order.receiverName" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="收件人电话" prop="order.receiverPhone">
                <el-input v-model="detail.order.receiverPhone" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="收件人地址" prop="order.receiverAddress">
                <el-input v-model="detail.order.receiverAddress" />
              </el-form-item>
            </el-col>

            <!--<el-col :span="12">
              <el-form-item label="发件人姓名" prop="order.receiverPhone">
                <el-input v-model="detail.order.senderName" />
              </el-form-item>
            </el-col>-->
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="发件人姓名" prop="order.senderName">
                <el-input v-model="detail.order.senderName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发件人电话" prop="order.senderPhone">
                <el-input v-model="detail.order.senderPhone" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="发件人地址" prop="order.senderAddress">
                <el-input v-model="detail.order.senderAddress" />
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import distpicker from 'v-distpicker'
import transportOrder from "../../api/work/transportOrder";

export default {
  data() {
    return {
      queryData: {
        page: 1,
        pageSize: 10,

        id: null,
        status: null,
        receiverName: '',
        receiverPhone: '',
        // receiverProvince: null,
        // receiverCity: null,
        // receiverCounty: null,

        senderName: '',
        senderPhone: '',
        // senderProvince: null,
        // senderCity: null,
        // senderCounty: null,
      },
      total: 10,
      tableData: [],
      dialogFormVisible: false,
      detail: {
        order: {

        }
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    onSubmit() {
      this.init()
    },
    handleClick(row) {
      /*this.detail = row
      this.dialogFormVisible = true*/
      this.$router.push({path:'transport-order-details/'+row.id})
    },
    handleSizeChange(val) {
      this.queryData.pageSize=val;
      this.init()
    },
    handleCurrentChange(val) {
      this.queryData.page=val;
      this.init()
    },
    init() {
      transportOrder
        .init(this.queryData)
        .then((data) => {
          this.tableData = data.data.records
          this.total = data.data.total
          this.queryData.page = data.data.current
          this.queryData.pageSize = data.data.size
        }).catch((e) => {
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }

  }
}
</script>

<style scoped>

</style>
